<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div style="width:100%">

              <table class="table1style" style="font-size:12px;white-space: nowrap;">
                  <tr>
                      <td align="center">标本日期</td>
                      <td>
                          <el-date-picker v-model="datetime1" type="date" align="right" value-format="yyyy-MM-dd" size="mini" placeholder="开始日期" :clearable="false" style="width: 125px"></el-date-picker> -
                          <el-date-picker v-model="datetime2" type="date" align="right" value-format="yyyy-MM-dd" size="mini" placeholder="结束日期" :clearable="false" style="width: 125px"></el-date-picker>
                      </td>
                      <td style="width:150px;text-align:right"  >申请单创建日期</td>
                      <td>
                          <el-date-picker v-model="datetime3" type="date" align="right" value-format="yyyy-MM-dd" size="mini" placeholder="开始日期" :clearable="false" style="width: 125px"></el-date-picker> -
                          <el-date-picker v-model="datetime4" type="date" align="right" value-format="yyyy-MM-dd" size="mini" placeholder="结束日期" :clearable="false" style="width: 125px"></el-date-picker>
                      </td>
                      <td style="width:200px;text-align:center" >
                          <el-checkbox v-model="showDifferent" false-label="0" true-label="1" style="width: 110px"  >仅显示不一致的数据</el-checkbox>
                          </td>
                      <td style="width:150px;text-align:right" >
                           报告单仅查询审核时间前<el-input v-model="querymin" size="mini" style="width: 50px" clearable></el-input>分钟的数据
                      </td>
                  </tr>
              </table>

              <div class="operation-list">
                  <el-button @click="btnQuery" icon="el-icon-search" type="primary">查询</el-button>
                  <el-button @click="btnClear" icon="el-icon-circle-close">清除</el-button>
              </div>

          </div>
      </div>
      <div class="pagecenter">
          <div class="middle-center">
               <el-tabs v-model="TabSheet" @tab-click="TabClick" style="height: 100%" type="border-card" ref="tabs" class="Tabundefined RMTab ResultGerm">
                  <el-tab-pane label="报告单" name="1" style="height: 100%">
                      <vxe-table ref="xTable" :data.sync="tableData" :select-config="selectConfig" height="auto" highlight-current-row :loading="loading" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe  :sort-config="{trigger: 'cell'}"   show-footer :footer-method="footerMethod"
                              :footer-cell-class-name="footerCellClassName" @cell-dblclick="rptCellDblClick">
                          <vxe-table-column field="querydate" title="日期" width="100px" sortable></vxe-table-column>
                          <vxe-table-column field="rptunitid" title="报告单元" width="120px" sortable :formatter="formatFun"></vxe-table-column>
                          <vxe-table-column field="main_cnt" title="正式库" width="100px" sortable  header-align="center"  align="right"></vxe-table-column>
                          <vxe-table-column field="mirror_cnt" title="镜像库" width="80px" sortable header-align="center"  align="right"></vxe-table-column>
                      </vxe-table>
                  </el-tab-pane>
                  <el-tab-pane label="申请单" name="2" style="height: 100%" :key="'req_' + tablekey" >
                       <vxe-table ref="xTable1" :data.sync="tableData1" :select-config="selectConfig" height="auto" highlight-current-row :loading="loading1" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe  :sort-config="{trigger: 'cell'}"  show-footer  :footer-method="footerMethod"
                              :footer-cell-class-name="footerCellClassName" @cell-dblclick="reqCellDblClick">
                          <vxe-table-column field="querydate" title="日期" width="100px" sortable></vxe-table-column>
                          <vxe-table-column field="req_groupid" title="分单类别" width="120px" sortable :formatter="formatFun"></vxe-table-column>
                          <vxe-table-column field="main_cnt" title="正式库" width="100px" sortable header-align="center"  align="right"></vxe-table-column>
                          <vxe-table-column field="mirror_cnt" title="镜像库" width="80px" sortable header-align="center"  align="right"></vxe-table-column>
                      </vxe-table>
                  </el-tab-pane>
              </el-tabs>
          <el-dialog width="1100px" title="镜像数据差异对比" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialogDetailVisible" :destroy-on-close="true">
              <div style="width: 100%">
                  <div  style=" float:left; width: 50%;height: 35px;line-height: 35px;text-align: left;">
                      <span style="color:red">*左侧为正式库</span>
                </div>
                <div  style=" float:right;width: 50%;height: 35px;line-height: 35px;text-align: right;">
                  <el-checkbox v-model="showAll" false-label="0" true-label="1" style="width: 110px;margin-right: 50px;" @change="differentchange">显示全部数据</el-checkbox>
                  <el-button  icon="el-icon-refresh-right" style="margin-right: 15px" @click="refreshdetail()">刷新</el-button>
                  <el-button  icon="el-icon-refresh-right" style="margin-right: 15px" @click="trapsdetail()">数据补漏</el-button></div>
              </div>
              <div style="height: 500px; width: 100%;margin-top: 37px;">
                  <rm-layout-left splitcolor="#ffffff" :splitwidth="2" :fixsize="550" :minfixsize="200" ref="layoutright">
                      <template v-slot:fix>
                          <div style="height: 100%">
                              <vxe-table ref="rpttable" :data.sync="rpttabledata" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" show-header-overflow :optimization="{ animat: false }"  :cell-class-name="reportCellName" header-align="center">
                              <vxe-table-column type="index" title="No." width="35" align="center"></vxe-table-column>
                              <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in rpttableColumn"></vxe-table-column>
                          </vxe-table>
                          </div>
                      </template>
                      <div style="height: 100%">
                           <vxe-table ref="rpttable" :data.sync="mrpttabledata" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable show-overflow size="mini" show-header-overflow :optimization="{ animat: false }"  :cell-class-name="reportCellName" header-align="center">
                              <vxe-table-column type="index" title="No." width="35" align="center"></vxe-table-column>
                              <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in mrpttableColumn"></vxe-table-column>
                          </vxe-table>
                      </div>
                  </rm-layout-left>
              </div>
          </el-dialog>

          </div>
      </div>

  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
// import Dashboard from '../../Dashboard.vue;
export default {
  // components: { Dashboard },
  name: "MNG198",
  data() {
      return {
          selectConfig: { tigger: "row" },
          tableData: [],
          tableData1: [],
          loading: false,
          loading1: false,
          datetime1: "",
          datetime2: "",
          datetime3: "",
          datetime4: "",
          showDifferent:"1",
          tabindex: "0",
          tablekey: 0,
          TabSheet: "1",
          rptunitOption:[],
          reqgroupOption:[],
          dialogDetailVisible:false,
          showAll:"0",
          rpttableColumn: [],
          rpttabledata:[],
          mrpttableColumn: [],
          mrpttabledata:[],
          selrow:[],
          querymin:"5",
      };
  },
  created() {
      this.initOption();
  },
  mounted() {
      this.datetime1=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
      this.datetime2=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
      this.datetime3=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
      this.datetime4=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
  },
  updated() {},
  methods: {
      async initOption() {
          try {
              const res = await this.$tool.request({
                  url: "MNG/MNG1/MNG198",
                  method: "post",
                  data: {
                      action: "initOption",
                  },
              });
              this.rptunitOption = res.rptunitOption;
              this.reqgroupOption = res.reqgroupOption;
          } catch (e) {
              this.$message.warning(e);
          }
      },

      btnQuery() {
          this.Query();
      },

      btnClear() {
          this.datetime1=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
          this.datetime2=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
          this.datetime3=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
          this.datetime4=XEUtils.toDateString(XEUtils.getWhatDay(new Date(), 0), "yyyy-MM-dd");
          this.tableData = [];
          this.tableData1 = [];
      },

      Query() {
          this.loading = true;
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG198",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "QueryData",
                      datetime1: this.datetime1,
                      datetime2: this.datetime2,
                      datetime3: this.datetime3,
                      datetime4: this.datetime4,
                      showDifferent: this.showDifferent,
                      tabindex:this.tabindex,
                      querymin:this.querymin,
                  }
              })
              .then(res => {
                  this.loading = false;
                  if(res.error !="1"){
                      this.$alert(res.msg);
                      return false;
                  }

                  if(this.tabindex == "0"){
                      this.tableData = res.retdata;
                  }
                  else{
                      this.tableData1 = res.retdata;
                  }
              })
              .catch(err => {
                  this.loading = false;
                  this.$alert(err, "错误");
              });
      },

      TabClick(tab) {
          this.tabindex = tab.index;
          this.tablekey++;
          this.Query();
      },

      formatFun({ cellValue, column, row }) {
          return this.retForamtVal(cellValue, column.property);
      },

      retForamtVal(cellValue, column) {
          if  (column == "rptunitid") {
              // 报告单元
              try {
                  let rptunit = this.rptunitOption.find((m) => m.data == cellValue);
                  if (rptunit != undefined && rptunit != null) {
                      return rptunit.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          }
          else if(column == "req_groupid"){
              // 报告单元
              try {
                  let reqgroup = this.reqgroupOption.find((m) => m.data == cellValue);
                  if (reqgroup != undefined && reqgroup != null) {
                      return reqgroup.display;
                  } else {
                      return cellValue;
                  }
              } catch {
                  return cellValue;
              }
          }else{
               return cellValue;
          }

      },

      footerCellClassName({ $rowIndex, column, columnIndex }) {
          if (columnIndex === 0 || ["main_cnt", "mirror_cnt"].includes(column.property)) {
              if ($rowIndex === 0) {
                  return "col-blue";
              } else {
                  return "col-red";
              }
          }
      },

      footerMethod({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "总计";
                  }
                  if (["main_cnt", "mirror_cnt"].includes(column.property)) {
                      return XEUtils.sum(data, column.property);
                  }

                  return null;
              }),
          ];
      },

      SumAll(data, property) {
          var plus = 0;
          if (data) {
              for (let i = 0, len = data.length; i < len; i++) {
                  plus += data[i][property] - 0;
              }
          }

          return plus;
      },

      rptCellDblClick({ row, column }) {
          this.selrow = row;
          this.dialogDetailVisible = true;
          this.getdetail(row);
      },

      reqCellDblClick({ row, column }) {
          this.selrow = row;
          this.dialogDetailVisible = true;
          this.getdetail(row);
      },

      refreshdetail(){
          this.getdetail(this.selrow);
      },
      trapsdetail(){
          if(this.showAll == 1)  {
              this.$alert("请显示差异的数据！");
              return false;
          }
           this.$tool
              .request({
                  url: "MNG/MNG1/MNG198",
                  method: "post",
                  data: {
                      action: "TrapsDetail",
                      tabledata:this.rpttabledata,
                      tabindex :this.tabindex,
                  },
              })
              .then((res) => {
                  this.$message(res.errmsg);
                  this.dialogDetailVisible = false;

              })
              .catch((e) => {});

      },
      getdetail(row){
          this.rpttableColumn = [];
          this.rpttabledata = [];
          this.mrpttableColumn = [];
          this.mrpttabledata = [];
          this.$tool
              .request({
                  url: "MNG/MNG1/MNG198",
                  method: "post",
                  data: {
                      action: "QueryDataDetail",
                      querydate:row.querydate, //标本开始日期
                      rptunitid: row.rptunitid, //
                      req_groupid:row.req_groupid,
                      showall:this.showAll,
                      tabindex :this.tabindex,
                  },
              })
              .then((res) => {
                  this.dialogDetailVisible = true;
                  this.rpttableColumn = res.RData.Cols;
                  this.rpttabledata = res.RData.Data;
                  this.mrpttableColumn = res.RData1.Cols;
                  this.mrpttabledata = res.RData1.Data;

              })
              .catch((e) => {});
      },
      differentchange(){
          this.rpttableColumn = [];
          this.rpttabledata =[];
          this.mrpttableColumn = [];
          this.mrpttabledata = [];
      },
      reportCellName({ row, rowIndex, column, columnIndex }) {
          if (column.property == "alter_flagname") {
              if (row.alter_flag == "1" || row.alter_flag == "2") {
                  return "colred";
              }
          } else if (column.property == "redo_flagname") {
              if (row.redo_flag == "2" || row.redo_flag == "3") {
                  return "colgreen";
              }
          } else if (column.property == "pat_name" || column.property == "pat_no") {
              return "col-blue";
          } else if (column.property == "unprint_reason") {
              return "col-red";
          }
      },
  }
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 72px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
  overflow-x: auto;
  overflow-x: overlay;
}

.pagecenter {
  position: absolute;
  top: 76px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
.table1style {
  padding: 0px 5px 0px 5px;
  font-size: 12px;
}
.operation-list {
  float: right;
  margin-right: 5px;
  margin-bottom: 5px;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
::v-deep .fail {
  color: red;
}
</style>
